.loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .grid-list {
    display: grid;
    grid-template-rows: repeat(20, 150px);
    grid-template-columns: repeat(auto-fill, 150px);
    grid-gap: 20px;
    .grid-item {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px dashed #aaa;
    }
  }
  .atom-spinner, .atom-spinner * {
    box-sizing: border-box;
  }
  .atom-spinner {
    height: 150px;
    width: 150px;
    overflow: hidden;
    .spinner-inner {
      position: relative;
      display: block;
      height: 100%;
      width: 100%;
    }
    .spinner-circle {
      display: block;
      position: absolute;
      color: #ff1d5e;
      font-size: calc(150px * 0.24);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .spinner-line {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      animation-duration: 1s;
      border-left-width: calc(150px / 25);
      border-top-width: calc(150px / 25);
      border-left-color: #ff1d5e;
      border-left-style: solid;
      border-top-style: solid;
      border-top-color: transparent;
      &:nth-child(1) {
        animation: atom-spinner-animation-1 1s linear infinite;
        transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
      }
      &:nth-child(2) {
        animation: atom-spinner-animation-2 1s linear infinite;
        transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
      }
      &:nth-child(3) {
        animation: atom-spinner-animation-3 1s linear infinite;
        transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
      }
      @keyframes atom-spinner-animation-1 {
        100% { transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg); }
      }
      @keyframes atom-spinner-animation-2 {
        100% { transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg); }
      }

      @keyframes atom-spinner-animation-3 {
        100% { transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg); }
      }
    }
  }

  .scaling-squares-spinner, .scaling-squares-spinner * {
    box-sizing: border-box;
  }

  .scaling-squares-spinner {
    height: 65px;
    width: 65px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    animation: scaling-squares-animation 1250ms;
    animation-iteration-count: infinite;
    transform: rotate(0deg);
    .square {
      height: calc(65px * 0.25 / 1.3);
      width: calc(65px * 0.25 / 1.3);
      margin-right: auto;
      margin-left: auto;
      border: calc(65px * 0.04 / 1.3) solid #ff1d5e;
      position: absolute;
      animation-duration: 1250ms;
      animation-iteration-count: infinite;
      &:nth-child(1) {
        animation-name: scaling-squares-spinner-animation-child-1;
      }
      &:nth-child(2) {
        animation-name: scaling-squares-spinner-animation-child-2;
      }
      &:nth-child(3) {
        animation-name: scaling-squares-spinner-animation-child-3;
      }
      &:nth-child(4) {
        animation-name: scaling-squares-spinner-animation-child-4;
      }
      @keyframes scaling-squares-animation {
        50% { transform: rotate(90deg); }
        100% { transform: rotate(180deg); }
      }
      @keyframes scaling-squares-spinner-animation-child-1 {
        50% { transform: translate(150%,150%) scale(2,2); }
      }
      @keyframes scaling-squares-spinner-animation-child-2 {
        50% { transform: translate(-150%,150%) scale(2,2); }
      }
      @keyframes scaling-squares-spinner-animation-child-3 {
        50% { transform: translate(-150%,-150%) scale(2,2); }
      }
      @keyframes scaling-squares-spinner-animation-child-4 {
        50% { transform: translate(150%,-150%) scale(2,2); }
      }
    }
  }

  .self-building-square-spinner, .self-building-square-spinner * {
    box-sizing: border-box;
  }

  .self-building-square-spinner {
    height: 40px;
    width: 40px;
    top: calc( -10px * 2 / 3);
    .square {
      height: 10px;
      width: 10px;
      top: calc( -10px * 2 / 3);
      margin-right: calc(10px / 3);
      margin-top: calc(10px / 3);
      background: #ff1d5e;
      float: left;
      position:relative;
      opacity: 0;
      animation: self-building-square-spinner 6s infinite;
      &:nth-child(1) {
        animation-delay: calc(300ms * 6);
      }
      &:nth-child(2) {
        animation-delay: calc(300ms * 7);
      }
      &:nth-child(3) {
        animation-delay: calc(300ms * 8);
      }
      &:nth-child(4) {
        animation-delay: calc(300ms * 3);
      }
      &:nth-child(5) {
        animation-delay: calc(300ms * 4);
      }
      &:nth-child(6) {
        animation-delay: calc(300ms * 5);
      }
      &:nth-child(7) {
        animation-delay: calc(300ms * 0);
      }
      &:nth-child(8) {
        animation-delay: calc(300ms * 1);
      }
      &:nth-child(9) {
        animation-delay: calc(300ms * 2);
      }
    }
    .clear{
      clear: both;
    }
    @keyframes self-building-square-spinner {
      0% { opacity: 0; }
      5% { opacity: 1; top: 0; }
      50.9% { opacity: 1; top: 0; }
      55.9% { opacity: 0; top: inherit; }
    }
  }

  .looping-rhombuses-spinner, .looping-rhombuses-spinner * {
    box-sizing: border-box;
  }

  .looping-rhombuses-spinner {
    width: calc(15px * 4);
    height: 15px;
    position: relative;
    .rhombus {
      height: 15px;
      width: 15px;
      background-color: #ff1d5e;
      left: calc(15px * 4);
      position: absolute;
      margin: 0 auto;
      border-radius: 2px;
      transform: translateY(0) rotate(45deg) scale(0);
      animation: looping-rhombuses-spinner-animation 2500ms linear infinite;
      &:nth-child(1) {
        animation-delay: calc(2500ms * 1 / -1.5);
      }

      &:nth-child(2) {
        animation-delay: calc(2500ms * 2 / -1.5);
      }

      &:nth-child(3) {
        animation-delay: calc(2500ms * 3 / -1.5);
      }

      @keyframes looping-rhombuses-spinner-animation {
        0% { transform: translateX(0) rotate(45deg) scale(0); }
        50% { transform: translateX(-233%) rotate(45deg) scale(1); }
        100% { transform: translateX(-466%) rotate(45deg) scale(0); }
      }
    }
  }

  .dot-loader1 {
    width: 60px;
    aspect-ratio: 4;
    background: radial-gradient(closest-side at calc(100%/6) 50%,#000 90%,#0000) 0/75% 100%;
    position: relative;
    animation: dot1-1 1s infinite linear;
    &::before {
      content:"";
      position: absolute;
      background: inherit;
      clip-path: inset(0 0 0 50%);
      inset: 0;
      animation: dot1-2 0.5s infinite linear;
    }
    @keyframes dot1-1 {
      0%,49.99% {transform: scale(1)}
      50%,100%  {transform: scale(-1)}
    }
    @keyframes dot1-2 {
      0% {transform: translateX(-37.5%) rotate(0turn)}
      80%,100% {transform: translateX(-37.5%) rotate(1turn)}
    }
  }

  .dot-loader2 {
    width: 15px;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: dot2 1s infinite linear alternate;
    @keyframes dot2 {
      0%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }
      33% {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}
      66% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}
      100%{box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }
    }
  }

  .dot-loader3 {
    width: 15px;
    aspect-ratio: 1;
    border-radius: 50%;
    clip-path: inset(-45px);
    box-shadow: -60px 15px,-60px 15px,-60px 15px;
    transform: translateY(-15px);
    animation: dot3 1s infinite linear;
    @keyframes dot3{
      16.67% {box-shadow:-60px 15px,-60px 15px,19px 15px}
      33.33% {box-shadow:-60px 15px,  0px 15px,19px 15px}
      40%,60%{box-shadow:-19px 15px,  0px 15px,19px 15px}
      66.67% {box-shadow:-19px 15px,  0px 15px,60px 15px}
      83.33% {box-shadow:-19px 15px, 60px 15px,60px 15px}
      100%   {box-shadow: 60px 15px, 60px 15px,60px 15px}
    }
  }

  .dot-loader4 {
    height: 30px;
    aspect-ratio: 2.5;
    --_g: no-repeat radial-gradient(farthest-side,#000 90%,#0000);
    background: var(--_g), var(--_g), var(--_g), var(--_g);
    background-size: 20% 50%;
    animation: dot4 1s infinite linear alternate;
    @keyframes dot4 {
      0%,
      5%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
      12.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
      25%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
      37.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
      50%   {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
      62.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
      75%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
      87.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
      95%,
      100%  {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    }
  }

  .dot-loader5 {
    height: 15px;
    aspect-ratio: 5;
    mask: linear-gradient(90deg,#0000 ,#000 20% 80%,#0000);
    -webkit-mask: linear-gradient(90deg,#0000 ,#000 20% 80%,#0000);
    background: radial-gradient(closest-side at 37.5% 50%,#000 94%,#0000) 0/calc(80%/3) 100%;
    animation: dot5 .75s infinite linear;
    @keyframes dot5 {
      100% {background-position: 36.36%}
    }
  }

  .circle-spinner1 {
    --d:22px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    color: #25b09b;
    box-shadow:
      calc(1*var(--d))      calc(0*var(--d))     0 0,
      calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1px,
      calc(0*var(--d))      calc(1*var(--d))     0 2px,
      calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
      calc(-1*var(--d))     calc(0*var(--d))     0 4px,
      calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
      calc(0*var(--d))      calc(-1*var(--d))    0 6px;
    animation: circle1 1s infinite steps(8);
    @keyframes circle1 {
      100% {transform: rotate(1turn)}
    }
  }

  .shapes-spinner1 {
    width: 40px;
    aspect-ratio: 1;
    color: #f03355;
    position: relative;
    background: radial-gradient(10px,currentColor 94%,#0000);
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        radial-gradient(9px at bottom right,#0000 94%,currentColor) top    left,
        radial-gradient(9px at bottom left ,#0000 94%,currentColor) top    right,
        radial-gradient(9px at top    right,#0000 94%,currentColor) bottom left,
        radial-gradient(9px at top    left ,#0000 94%,currentColor) bottom right;
      background-size: 20px 20px;
      background-repeat: no-repeat;
      animation: shapes1 1.5s infinite cubic-bezier(0.3,1,0,1);
    }
    @keyframes shapes1 {
      33%  {inset:-10px;transform: rotate(0deg)}
      66%  {inset:-10px;transform: rotate(90deg)}
      100% {inset:0    ;transform: rotate(90deg)}
    }
  }

  .shapes-spinner2 {
    width: 40px;
    aspect-ratio: 1;
    display: flex;
    &::before,
    &::after {
      content: "";
      flex: 1;
      background: #f03355;
      animation: shapes2 2s infinite;
      border-radius: 100px 0 0 100px;
      transform-origin: top right;
      transform: translateY(calc(var(--s,1)*0%)) rotate(0);
    }
    &::after {
      transform-origin: bottom left;
      border-radius: 0 100px 100px 0;
      --s:-1;
    }
    @keyframes shapes2 {
      33%  {transform: translate(0,calc(var(--s,1)*50%)) rotate(0)}
      66%  {transform: translate(0,calc(var(--s,1)*50%)) rotate(-90deg)}
      90%,
      100% {transform: translate(calc(var(--s,1)*-100%),calc(var(--s,1)*50%))  rotate(-90deg)}
    }
  }

  .shapes-spinner3 {
    width: 40px;
    aspect-ratio: 1;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      --c:#0000, #f03355 1deg 120deg,#0000 121deg;
      background:
        conic-gradient(from 0deg,  var(--c)) top right,
        conic-gradient(from 120deg,var(--c)) bottom,
        conic-gradient(from 240deg,var(--c)) top left;
      background-size: 40px 40px;
      background-repeat: no-repeat;
      animation: shapes3 2s infinite cubic-bezier(0.3,1,0,1);
    }
    @keyframes shapes3 {
      33%  {inset:-8px;transform: rotate(0deg)}
      66%  {inset:-8px;transform: rotate(180deg)}
      100% {inset:0   ;transform: rotate(180deg)}
    }
  }

  .shapes-spinner4 {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    &::before,
    &::after {
      content: "";
      grid-area: 1/1;
      border-radius: 50%;
      background: #f03355;
      mask: repeating-linear-gradient(#000 0 5px,#0000 0 10px);
      -webkit-mask: repeating-linear-gradient(#000 0 5px,#0000 0 10px);
      animation: shapes4 1.5s infinite;
    }
    &::after {
      mask: repeating-linear-gradient(#0000 0 5px,#000 0 10px);
      -webkit-mask:repeating-linear-gradient(#0000 0 5px,#000 0 10px);
      --s:-1;
    }
    @keyframes shapes4 {
      0%,
      10% {transform: translate(0) rotate(0)}
      35% {transform: translate(calc(var(--s,1)*50%)) rotate(0)}
      66% {transform: translate(calc(var(--s,1)*50%)) rotate(calc(var(--s,1)*180deg))}
      90%,
      100% {transform: translate(0) rotate(calc(var(--s,1)*180deg))}
    }
  }

  .shapes-spinner5 {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    &::before,
    &::after {
      content: "";
      grid-area: 1/1;
      border-radius: 50%;
      background: #f03355;
      mask:repeating-linear-gradient(#000 0 10px,#0000 0 20px);
      -webkit-mask:repeating-linear-gradient(#000 0 10px,#0000 0 20px);
    }
    &::after {
      mask:repeating-linear-gradient(#0000 0 10px,#000 0 20px);
      -webkit-mask:repeating-linear-gradient(#0000 0 10px,#000 0 20px);
      animation: shapes5 1.5s infinite;
    }
    @keyframes shapes5 {
      0%,
      10%  {transform: rotate(0)      translate(0)}
      35%  {transform: rotate(0)      translate(100%)}
      66%  {transform: rotate(180deg) translate(100%)}
      90%,
      100% {transform: rotate(180deg) translate(0) }
    }
  }

  .shapes-spinner6 {
    width: 50px;
    aspect-ratio: 1;
    color: #398EB6;
    background: currentColor;
    border-radius: 50%;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      background:
        radial-gradient(farthest-side at bottom right,#0000 94%,currentColor 96%) 0    0   ,
        radial-gradient(farthest-side at bottom left ,#0000 94%,currentColor 96%) 100% 0   ,
        radial-gradient(farthest-side at top    left ,#0000 94%,currentColor 96%) 100% 100%,
        radial-gradient(farthest-side at top    right,#0000 94%,currentColor 96%) 0    100%;
      background-size: 25px 25px;
      background-repeat: no-repeat;
      animation:
        shapes6-1 1s infinite,
        shapes6-2 1s infinite;
    }
    @keyframes shapes6-1 {
      0%,10%,90%,100% {inset:0}
      40%,60% {inset:-10px}
    }

    @keyframes shapes6-2 {
      0%,40%  {transform: rotate(0)}
      60%,100%{transform: rotate(90deg)}
    }
  }

  .progress-loader1 {
    width: 120px;
    height: 22px;
    border-radius: 20px;
    color: #514b82;
    border: 2px solid;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      margin: 2px;
      inset: 0 100% 0 0;
      border-radius: inherit;
      background: currentColor;
      animation: progress1 2s infinite;
    }
    @keyframes progress1 {
        100% {inset:0}
    }
  }

  .progress-loader2 {
    width: 120px;
    height: 20px;
    border-radius: 20px;
    background:
    repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0%   no-repeat,
    repeating-linear-gradient(135deg,#ddd    0 10px,#eee    0 20px) 0/100%;
    animation: progress2 2s infinite;
    @keyframes progress2 {
        100% {background-size:100%}
    }
  }

  .progress-loader3 {
    --r1: 154%;
    --r2: 68.5%;
    width: 60px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,#269af2 80%),
      radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%),
      radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,#269af2 80%),
      #ccc;
    background-size: 50.5% 220%;
    background-position: -100% 0%,0% 0%,100% 0%;
    background-repeat:no-repeat;
    animation: progress3 2s infinite linear;
    @keyframes progress3 {
        33%  {background-position:    0% 33% ,100% 33% ,200% 33% }
        66%  {background-position: -100%  66%,0%   66% ,100% 66% }
        100% {background-position:    0% 100%,100% 100%,200% 100%}
    }
  }

  .progress-loader4 {
    width: 124px;
    height: 24px;
    mask:
      conic-gradient(from 135deg at top   ,#0000,#000 .5deg 90deg,#0000 90.5deg) 0 0   ,
      conic-gradient(from -45deg at bottom,#0000,#000 .5deg 90deg,#0000 90.5deg) 0 100%;
    -webkit-mask:
      conic-gradient(from 135deg at top   ,#0000,#000 .5deg 90deg,#0000 90.5deg) 0 0   ,
      conic-gradient(from -45deg at bottom,#0000,#000 .5deg 90deg,#0000 90.5deg) 0 100%;
    mask-size:25% 50%;
    -webkit-mask-size:25% 50%;
    mask-repeat:repeat-x;
    -webkit-mask-repeat:repeat-x;
    background: linear-gradient(#25b09b 0 0) left/0% 100% no-repeat #ddd;
    animation: progress4 2s infinite linear;
    @keyframes progress4 {
      100% {background-size: 100% 100%}
    }
  }

  .wobbling-loader1 {
    height: 80px;
    width: 20px;
    color: #514b82;
    background:
      radial-gradient(farthest-side,currentColor 94%,#0000 ) top/8px 8px,
      linear-gradient(currentColor 0 0) top/4px 70%,
      conic-gradient(from -30deg at bottom,#0000,currentColor 2deg 58deg,#0000 60deg) bottom            /100% 20px,
      conic-gradient(from 150deg at top   ,#0000,currentColor 2deg 58deg,#0000 60deg) bottom 20px left 0/100% 20px;
    background-repeat: no-repeat;
    transform-origin: 50% 4px;
    animation: wobbling1 2s infinite cubic-bezier(0.5,300,0.5,-300);
    @keyframes wobbling1 {
      100% {transform: rotate(0.5deg)}
    }
  }

  /* HTML: <div class="loader"></div> */
  .wobbling-loader2 {
    width: 120px;
    height: 20px;
    clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
    background:
    conic-gradient(from 135deg at top   ,#f03355 90deg,#0000 0) top    left,
    conic-gradient(from -45deg at bottom,#f03355 90deg,#0000 0) bottom left,
    #ccc;
    background-size: 20px 50%;
    background-repeat: no-repeat;
    animation: wobbling2 1s infinite linear;
    @keyframes wobbling2 {
        50% {background-position:top right,bottom right }
    }
  }

  .infinite-loader1 {
    width: calc(80px / cos(45deg));
    height: 14px;
    background: repeating-linear-gradient(-45deg,#000 0 15px,#0000 0 20px) left/200% 100%;
    animation: infinite1 2s infinite linear;
    @keyframes infinite1 {
        100% {background-position:right}
    }
  }

  .infinite-loader2 {
    width: calc(80px / cos(45deg));
    height: 14px;
    background: repeating-linear-gradient(-45deg,#000 0 15px,#0000 0 20px) left/200% 100%;
    animation: infinite2 2s infinite linear;
    @keyframes infinite2 {
        100% {background-position:right}
    }
  }

  .infinite-loader3 {
    width: calc(80px / cos(45deg));
    height: 14px;
    --c: #000 0 15px,#0000 0 20px;
    background:
      repeating-linear-gradient(135deg,var(--c)) left top,
      repeating-linear-gradient( 45deg,var(--c)) left bottom;
    background-size:  200% 50%;
    background-repeat: no-repeat;
    animation: infinite3 2s infinite linear;
    @keyframes infinite3 {
        100% {background-position:top right,bottom right}
    }
  }

  .infinite-loader4 {
    width: 90px;
    height: 14px;
    color: #000;
    background:
      radial-gradient(circle 10px at right 7px top 50%,#0000 92%,currentColor),
      radial-gradient(circle 10px at right 0   top 50%,currentColor 92%,#0000);
    background-size: calc(100%/3) 100%;
    background-position: 50% 0%;
    animation: infinite4 .5s infinite linear;
    @keyframes infinite4 {
      100% {background-position: 0% 0%}
    }
  }

  .flipping-loader1 {
    width: 60px;
    aspect-ratio: 1;
    display: grid;
    grid: 50%/50%;
    color: #25b09b;
    --_g: no-repeat linear-gradient(currentColor 0 0);
    background: var(--_g),var(--_g),var(--_g);
    background-size: 50.1% 50.1%;
    animation:
      flipping1-1   1.5s infinite steps(1) alternate,
      flipping1-2 3s   infinite steps(1);
    &::before {
      content: "";
      background: currentColor;
      transform: perspective(150px) rotateY(0deg) rotateX(0deg);
      transform-origin: bottom right;
      animation: flipping1-3 1.5s infinite linear alternate;
    }
    @keyframes flipping1-1 {
      0%  {background-position: 0    100%,100% 100%,100% 0}
      33% {background-position: 100% 100%,100% 100%,100% 0}
      66% {background-position: 100% 0   ,100% 0   ,100% 0}
    }
    @keyframes flipping1-2 {
      0%  {transform: scaleX(1)  rotate(0deg)}
      50% {transform: scaleX(-1) rotate(-90deg)}
    }
    @keyframes flipping1-3 {
      16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
      33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
      66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
      100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
    }
  }

  .flipping-loader2 {
    width: 50px;
    height: 50px;
    display: flex;
    color: #514b82;
    background:
      linear-gradient(currentColor 0 0) right  /51% 100%,
      linear-gradient(currentColor 0 0) bottom /100% 51%;
    background-repeat: no-repeat;
    animation: flipping2-1 2s infinite linear .25s;
    &::before{
      content:"";
      width: 50%;
      height: 50%;
      background: currentColor;
      transform-origin: 10% 10%;
      animation: flipping2-2 .5s infinite linear;
    }
    @keyframes flipping2-1 {
      0%   ,12.49% {transform: rotate(0deg)}
      12.5%,37.49% {transform: rotate(90deg)}
      37.5%,62.49% {transform: rotate(180deg)}
      62.5%,87.49% {transform: rotate(270deg)}
      87.5%,100%   {transform: rotate(360deg)}
    }
    @keyframes flipping2-2 {
      0%      {transform: perspective(80px) rotate3d(-1,1,0, 0)}
      80%,100%{transform: perspective(80px) rotate3d(-1,1,0,-360deg)}
    }
  }

  .continuous-spinner1 {
    width: 120px;
    height: 22px;
    border-radius: 40px;
    color: #514b82;
    border: 2px solid;
    position: relative;
    overflow: hidden;
    &::before {
      content: "";
      position: absolute;
      margin: 2px;
      width: 14px;
      top: 0;
      bottom: 0;
      left: -20px;
      border-radius: inherit;
      background: currentColor;
      box-shadow: -10px 0 12px 3px currentColor;
      clip-path: polygon(0 5%, 100% 0,100% 100%,0 95%,-30px 50%);
      animation: continuous-1 1s infinite linear;
    }
    @keyframes continuous-1 {
      100% {left: calc(100% + 20px)}
    }
  }

  .continuous-spinner2 {
    width: 120px;
    height: 20px;
    background: linear-gradient(#514b82 0 0) left -40px top 0/40px 100% no-repeat #eee;
    mask:
      conic-gradient(from 90deg at 5px 5px,#0000 25%,#000 0)
      0 0/calc((100% - 5px)/5) calc(100% - 5px);
    -webkit-mask:
      conic-gradient(from 90deg at 5px 5px,#0000 25%,#000 0)
      0 0/calc((100% - 5px)/5) calc(100% - 5px);
    animation: continuous-2 1s infinite linear;
    @keyframes continuous-2 {
      100% {background-position: right -40px top 0}
    }
  }

  .plusing-loader1 {
    width: 50px;
    aspect-ratio: 1;
    color:#dc1818;
    background:
    radial-gradient(circle at 60% 65%, currentColor 62%, #0000 65%) top left,
    radial-gradient(circle at 40% 65%, currentColor 62%, #0000 65%) top right,
    linear-gradient(to bottom left, currentColor 42%,#0000 43%) bottom left ,
    linear-gradient(to bottom right,currentColor 42%,#0000 43%) bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: inherit;
      opacity: 0.4;
      animation: plusing1 1s infinite;
    }
    @keyframes plusing1 {
      to {transform:scale(1.8);opacity:0}
    }
  }

  .hungry-loader1 {
    width: 35px;
    height: 80px;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset: 0 0 20px;
      border-radius: 50px 50px 10px 10px;
      padding: 1px;
      background: linear-gradient(#ff4d80 33%,#ffa104 0 66%, #01ddc7 0) content-box;
      --c:radial-gradient(farthest-side,#000 94%,#0000);
      -webkit-mask:
        linear-gradient(#0000 0 0),
        var(--c) -10px -10px,
        var(--c)  15px -14px,
        var(--c)   9px -6px,
        var(--c) -12px  9px,
        var(--c)  14px  9px,
        var(--c)  23px 27px,
        var(--c)  -8px 35px,
        var(--c)   50% 50%,
        linear-gradient(#000 0 0);
      mask:
        linear-gradient(#000 0 0),
        var(--c) -10px -10px,
        var(--c)  15px -14px,
        var(--c)   9px -6px,
        var(--c) -12px  9px,
        var(--c)  14px  9px,
        var(--c)  23px 27px,
        var(--c)  -8px 35px,
        var(--c)   50% 50%,
        linear-gradient(#0000 0 0);
      -webkit-mask-composite: destination-out;
      mask-composite: exclude,add,add,add,add,add,add,add,add;
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      animation: hungry1 3s infinite ;
    }
    &::before {
      content: "";
      position: absolute;
      inset: 50% calc(50% - 4px) 0;
      background: #e0a267;
      border-radius: 50px;
    }
    @keyframes hungry1 {
      0%   {-webkit-mask-size: auto,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
      10%  {-webkit-mask-size: auto,25px 25px,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
      20%  {-webkit-mask-size: auto,25px 25px,25px 25px,0 0,0 0,0 0,0 0,0 0,0 0}
      30%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,0 0,0 0,0 0,0 0,0 0}
      40%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,0 0,0 0,0 0,0 0}
      50%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,0 0,0 0,0 0}
      60%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,0 0,0 0}
      70%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,25px 25px,0 0}
      80%,
      100% {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,25px 25px,200% 200%}
    }
  }

  /* HTML: <div class="loader"></div> */
  .hungry-loader2 {
    width: 80px;
    height: 40px;
    border-radius: 0 0 100px 100px;
    border: 5px solid #538a2d;
    border-top: 0;
    box-sizing: border-box;
    background:
      radial-gradient(farthest-side at top,#0000 calc(100% - 5px),#e7ef9d calc(100% - 4px)),
      radial-gradient(2px 3px,#5c4037 89%,#0000) 0 0/17px 12px,
      #ff1643;
    --c:radial-gradient(farthest-side,#000 94%,#0000);
    -webkit-mask:
      linear-gradient(#0000 0 0),
      var(--c) 12px -8px,
      var(--c) 29px -8px,
      var(--c) 45px -6px,
      var(--c) 22px -2px,
      var(--c) 34px  6px,
      var(--c) 21px  6px,
      linear-gradient(#000 0 0);
    mask:
      linear-gradient(#000 0 0),
      var(--c) 12px -8px,
      var(--c) 29px -8px,
      var(--c) 45px -6px,
      var(--c) 22px -2px,
      var(--c) 34px  6px,
      var(--c) 21px  6px,
      linear-gradient(#0000 0 0);
    -webkit-mask-composite:destination-out;
    mask-composite:exclude,add,add,add,add,add,add;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    animation: hungry2 3s infinite;
    @keyframes hungry2 {
      0%   {-webkit-mask-size: auto,0 0,0 0,0 0,0 0,0 0,0 0}
      15%  {-webkit-mask-size: auto,20px 20px,0 0,0 0,0 0,0 0,0 0}
      30%  {-webkit-mask-size: auto,20px 20px,20px 20px,0 0,0 0,0 0,0 0}
      45%  {-webkit-mask-size: auto,20px 20px,20px 20px,20px 20px,0 0,0 0,0 0}
      60%  {-webkit-mask-size: auto,20px 20px,20px 20px,20px 20px,20px 20px,0 0,0 0}
      75%  {-webkit-mask-size: auto,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,0 0}
      90%,
      100% {-webkit-mask-size: auto,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px}
    }
  }

  .clones-loader1 {
    width: 28px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #F10C49;
    animation: clones1 1.5s infinite;
    @keyframes clones1 {
      0%,
      100%{transform:translate(-35px);box-shadow:  0     0 #F4DD51, 0     0 #E3AAD6}
      40% {transform:translate( 35px);box-shadow: -15px  0 #F4DD51,-30px  0 #E3AAD6}
      50% {transform:translate( 35px);box-shadow:  0     0 #F4DD51, 0     0 #E3AAD6}
      90% {transform:translate(-35px);box-shadow:  15px  0 #F4DD51, 30px  0 #E3AAD6}
    }
  }

  .clones-loader2 {
    width: 28px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #E3AAD6;
    transform-origin: top;
    display: grid;
    animation: clones2-1 1s infinite linear;
    &::before,
    &::after {
      content: "";
      grid-area: 1/1;
      background:#F4DD51;
      border-radius: 50%;
      transform-origin: top;
      animation: inherit;
      animation-name: clones2-2;
    }
    &::after {
      background: #F10C49;
      --s:180deg;
    }
    @keyframes clones2-1 {
      0%,20% {transform: rotate(0)}
      100%   {transform: rotate(360deg)}
    }
    @keyframes clones2-2 {
      50% {transform: rotate(var(--s,90deg))}
      100% {transform: rotate(0)}
    }
  }

  .qiaoqiaoban-loader {
    width: 80px;
    height: 80px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin:center center;
    animation: effbox73 5s cubic-bezier(0, 0.6, 1, 0.4) infinite;
    @keyframes effbox73{
      0%{ transform: rotate(-30deg); }
      40%{ transform: rotate(30deg); }
      50%{ transform: rotate(30deg); }
      90%{ transform: rotate(-30deg); }
      100%{ transform: rotate(-30deg); }
    }
    &::before{
      content: '';
      width: 100%;
      height: 4px;
      background-color: #000;
      position: absolute;
      left: 0;
    }
    &::after{
      content: '';
      width: 16px;
      height: 16px;
      background-color: #089f1f;
      position: absolute;
      top: 21px;
      left: 0;
      border-radius: 3px;
      animation: eff73 5s ease-in-out infinite;
    }
    @keyframes eff73{
      0%{ transform: translateX(0) rotate(0); }
      10%{ transform: translateX(16px) rotate(90deg); }
      20%{ transform: translateX(32px) rotate(180deg); }
      30%{ transform: translateX(48px) rotate(270deg); }
      40%{ transform: translateX(64px) rotate(360deg); }
      50%{ transform: translateX(64px) rotate(360deg); }
      60%{ transform: translateX(48px) rotate(270deg); }
      70%{ transform: translateX(32px) rotate(180deg); }
      80%{ transform: translateX(16px) rotate(90deg); }
      90%{ transform: translateX(0) rotate(0); }
      100%{ transform: translateX(0) rotate(0); }
    }
  }
  // https://css-loaders.com/clones/
}
